<template>
	<view class="container">
		<tui-tabs :isFixed="true" :sliderWidth="150" :tabs="tabs" :unlined="true" :top="10" :currentTab="currentTab" @change="change"></tui-tabs>
		<block v-for="(item, index) in tabs" :key="index">
			<view v-show="currentTab == index">
				<mescroll-uni @init="mescrollInit" :top="100" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
					<view class="order-item" v-for="(item, _index) in orderList[index]" :key="_index">
						<view class="order-item-left">
							<text class="title">{{ item.orderItems[0].goodsName }}</text>
							<text class="info">订单号:{{ item.orderCode }}</text>
							<text class="info">下单时间:{{ item.creationTimeStr }}</text>
							<text class="info">商品总价:{{ item.totalPrice }}元</text>
						</view>
						<view class="order-item-right"><view class="btn-item success" v-if="item.orderState == 3">已支付</view>
						<view class="btn-item enter" v-else-if="item.orderState == 1">未支付</view>
						</view>
					</view>				
					<mescroll-empty v-if="orderList[index].length==0"></mescroll-empty>
				</mescroll-uni>
			</view>
		</block>
	</view>
</template>

<script>
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import MescrollMixin from "mescroll-uni/mescroll-mixins.js";
import MescrollEmpty from 'mescroll-uni/components/mescroll-empty.vue';
import tuiTabs from '@/components/tui-tabs/tui-tabs';
import { onlyPay } from '@/common/pay.js';
// #ifdef H5
import routeUtil from '@/util/routeUtil.js';
// #endif
export default {
	components: { tuiTabs, MescrollUni,MescrollEmpty },
	data() {
		return {
			tabs: [{ name: '全部订单' }, { name: '未支付' }, { name: '已支付' }],
			orderList: [[], [], []],
			currentTab: 2,
			downOption: {
				use: true,
				auto: false
			},
			//上拉加载的常用配置
			upOption: {
				use: true, // 是否启用上拉加载; 默认true
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
				noMoreSize: 2, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
				empty: false,
				textNoMore: '---没有了---'
			}
		};
	},
	onLoad() {
		// #ifdef H5
		routeUtil.reloadUrlHandler();
		// #endif
		this.getOrderList().then(() => {
			// #ifdef H5
			this.$wechat.hideMenu();
			// #endif
		});
	},
	watch: {
		currentTab(value) {
			if (this.orderList[this.currentTab].length == 0) {
				this.getOrderList();
			}
		}
	},
	methods: {
		change(e) {
			this.currentTab = e.index;
		},
		downCallback(mescroll) {
			this.orderList[this.currentTab] = [];
			this.getOrderList()
				.then(() => {
					mescroll.endSuccess();
				})
				.catch(() => {
					mescroll.endErr();
				});
		},
		async upCallback(mescroll) {
			try {
				var Count = await this.getOrderList();
				mescroll.endSuccess(Count, Count > 0);
			} catch (e) {
				mescroll.endErr();
			}
		},
		async getOrderList() {
			var that = this;
			var orderState = '';
			if (this.currentTab == 0) {
				orderState = '';
			} else if (this.currentTab == 1) {
				orderState = 1;
			} else if (this.currentTab == 2) {
				orderState = 3;
			}
			var result = await this.$http.request({
				url: 'api/Order/GetOrderList',
				data: {
					orderState: orderState,
					SkipCount: that.orderList[that.currentTab].length,
					MaxResultCount: 30
				}
			});
			that.orderList[that.currentTab] = that.orderList[that.currentTab].concat(result);
			that.$set(that.orderList, that.orderList);
			return result.length;
		}
	}
};
</script>

<style lang="scss" scoped>
.order-item {
	width: 95%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	height: 300rpx;
	margin-bottom: 20rpx;
	border-radius: 10px;
	background: #fff;
	color: #fff;
	border: 1px solid #808080;
	border-top: none;
	.order-item-left {
		flex-basis: 70%;
		flex-grow: 0;
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		line-height: 70rpx;
		.title {
			color: #000;
			font-size: 40rpx;
			overflow: hidden;
			text-overflow: ellipsis; /* 文本溢出时显示省略号来代表被修剪的文本 */
			display: -webkit-box; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
			-webkit-box-orient: vertical; /* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */
			-webkit-line-clamp: 2; /* 文本需要显示多少行 */
			// &.strong {
			// 	font-size: 50rpx;
			// 	margin-bottom: 10px;
			// }
		}
		.info {
			font-size: 30rpx;
			color: #3f536e;
			line-height: 40rpx;
		}
	}
	.order-item-right {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		.btn-item {
			border-radius: 10px;
			padding: 5px;
			margin-right: 10px;
			font-size: 26rpx;
			&.enter {
				background: $uni-color-main-dark;
			}
			&.success {
				color: #4cd964;
			}
			&.faild {
				color: #808080;
			}
			&.send {
				background: #4cd964;
			}
		}
		.price {
			color: #555555;
		}
	}
}
</style>
